<template>
  <div class="my-head">
    <van-row :gutter="20" type="flex" align="center">
      <van-col>
        <img src="@/assets/images/img_avatar2.png" style="width:60px">
      </van-col>
      <van-col>
        <div class="L-title">{{ username }}</div>
        <div class="L-small-text">{{ depname }}</div>
      </van-col>
    </van-row>
  </div>
  <van-cell-group>
    <van-cell title="修改密码" value="" is-link @click="toChangePwd" />
    <van-cell title="修改信息" value="" is-link @click="toChangeInfo" />
    <van-cell title="退出登录" value="" is-link @click="toLoginOut" />
  </van-cell-group>

  <Tabbar />

</template>

<script setup lang="ts">
import { useAuthStore } from '@/stores/userInfo'
import Tabbar from "@/components/common/Tabbar.vue";
import { useRouter } from "vue-router";
const router = useRouter();
import { defaultMenu, apiConfigurable } from '@/request/api/api'

import { showLoadingToast, closeToast, showToast } from "vant";
import { ref, onMounted } from "vue"

onMounted(() => {
  getData()
})

const username = ref("")
const depname = ref("")

function getData() {
  showLoadingToast({
    message: "加载中...",
    forbidClick: true,
    duration: 0,
  });
  defaultMenu().then((res) => {
    if (res.code === 0) {
      username.value = res.data.jsondata.username
      depname.value = res.data.jsondata.depname

    }
    // data.mainData = res.data?.jsondata?.menu[0] || [];
    closeToast();
  });
}

function toChangeInfo() {
  router.push({
    path: "/changeInfo",
  });

}

function toChangePwd() {
  router.push({
    path: "/changePwd",
  });
}


function toLoginOut() {

  showLoadingToast({
    message: "正在退出...",
    forbidClick: true,
    duration: 0,
  });

  apiConfigurable('login.loginout.do').then(res => {
    if (res.code === 0) {
      showToast("成功退出!")
      const userStore = useAuthStore();
      userStore.clearToken()
      setTimeout(() => {
        sessionStorage.setItem("isLogin", "0");
        window.close()
        router.push({
          path: "/login",
        });
      }, 1000)
    }
  }).finally(() => {
    closeToast()
  })




}
</script>

<style scoped>
.my-head {
  width: 100%;
  height: 150px;
  background-image: url("@/assets/images/img_headbg2.png");
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  color: #fff;
}
</style>